<template>
  <!-- 婚纱礼服二级页面 -->
  <colin-view>
    <div>
      <transition name="fade">
        <p v-show="flag" class="bartitle">婚嫁首饰</p>
      </transition>
    </div>
  </colin-view>
  <div class="ring">
    <header>
      <van-swipe :autoplay="3000" lazy-render :show-indicators="false">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </header>
    <h3>珠宝攻略</h3>
    <nav>
      <div class="box_1">
        <div class="nav_box">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvx4ezmcc5emwcztoytystcuc05gdpw1e45840639-2d0e-403a-8ac6-a919289afd2b"
            alt=""
          />
          <span>攻略</span>
          <p>世界十大婚戒品牌</p>
        </div>
        <div class="nav_box">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvx4ezmcc5emwcztoytystcuc05gdpw1e45840639-2d0e-403a-8ac6-a919289afd2b"
            alt=""
          />
          <span>攻略</span>
          <p>世界十大婚戒品牌</p>
        </div>
        <div class="nav_box">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvx4ezmcc5emwcztoytystcuc05gdpw1e45840639-2d0e-403a-8ac6-a919289afd2b"
            alt=""
          />
          <span>攻略</span>
          <p>世界十大婚戒品牌</p>
        </div>
      </div>
    </nav>
    <main>
      <div class="main_tab">
        <div ref="p1">
          <p
            @click="(current = 0), $router.push('/ring')"
            :class="current == 0 ? 'active' : ''"
          >
            款式相册
          </p>
        </div>
        <div ref="p2">
          <p
            @click="(current = 1), $router.push('/ring/ring2')"
            :class="current == 1 ? 'active' : ''"
          >
            严选品牌
          </p>
        </div>
        <div ref="p3">
          <p
            @click="(current = 2), $router.push('/ring/ring3')"
            :class="current == 2 ? 'active' : ''"
          >
            热门商品
          </p>
        </div>
      </div>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import colinView from "./Colin.vue";
export default {
  data() {
    return {
      current: 0, //控制main里边头部导航
      flag: true, //控制navbar的标题
      scrollTop: "",
      images: [
        "https://lanhu.oss-cn-beijing.aliyuncs.com/ps3yh4rsfh244wg64yd79pmvmo1ryp8y9l6c955d73-f6a5-4743-8c22-bd6a3df7e3de",
        "https://lanhu.oss-cn-beijing.aliyuncs.com/pslgimr9ao4pbo6novui51dyl988y8re3s18d584e5-0056-407e-bb14-f3975cf2beee",
        "https://lanhu.oss-cn-beijing.aliyuncs.com/psc80s2fsjy16un1ts7twp44fh34v5a4hf2905de13-9eb4-4208-999f-5ff7fd2b9652",
      ],
    };
  },
  components: { colinView },
  mounted() {
    //组件创建完成之后之后开始运行handleScroll方法
    window.addEventListener("scroll", this.handleScroll);
  },
  watch: {
    scrollTop() {
      if (this.scrollTop > 330) {
        //控制标题名的出现消失
        this.flag = false;
      } else {
        this.flag = true;
      }
      if (this.scrollTop > 350) {
        // 操控这个元素给其添加类属性
        this.$refs.p1.className = "move1";
        this.$refs.p2.className = "move2";
        this.$refs.p3.className = "move3";
      }
      if (this.scrollTop <= 350) {
        this.$refs.p1.className = "";
        this.$refs.p2.className = "";
        this.$refs.p3.className = "";
      }
    },
  },
  methods: {
    handleScroll() {
      // 第二种方法
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //   console.log(this.scrollTop);
    },
  },
  //很重要！ 离开次组件时销毁handleScroll 使其不再运行
  //！！！！组件生命周期名字跟vue2不相同，妈了个巴子！！！！！！！
  unmounted() {
    window.removeEventListener("scroll", this.handleScroll);
    console.log("组件销毁，handlerScroll不再运行");
  },
};
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.bartitle {
  text-align: center;
  padding-top: 0.88rem;
}
.ring {
  width: 7.5rem;
  header {
    padding-top: 0.1rem;
    width: 7.1rem;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  h3 {
    margin: 0.3rem;
    height: 0.26rem;
    font-size: 0.28rem;
    color: #333333;
  }
  nav {
    overflow-x: scroll; //x轴滚动

    .box_1 {
      width: max-content;
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
      overflow: hidden;
      .nav_box {
        position: relative;
        margin: 0.2rem 0.45rem;
        width: 2.3rem;
        height: 2.3rem;
        // border: 1px solid red;
        img {
          width: 100%;
          height: 1.8rem;
        }
        span {
          position: absolute;
          top: 0.1rem;
          left: 0;
          height: 0.46rem;
          font-size: 0.2rem;
          line-height: 0.2rem;
        }
        p {
          height: 0.24rem;
          font-size: 0.24rem;
          font-weight: 400;
          color: #999999;
          text-align: center;
        }
      }
    }
  }

  main {
    margin-top: 0.2rem;
    .main_tab {
      display: flex;
      justify-content: space-around;
      margin-bottom: 0.35rem;
      p {
        height: 0.23rem;
        font-size: 0.24rem;
        font-weight: 500;
        color: #999999;
      }
      .active {
        height: 0.23rem;
        font-size: 0.24rem;
        font-weight: 800;
        color: #333333;
      }
    }
    .move1 {
      position: fixed;
      top: 1.2rem;
      left: 0.8rem;
      transform: translateX(0.8rem);
      z-index: 99999999999;
      transition: 0.5s;
      color: aliceblue;
    }
    .move2 {
      position: fixed;
      top: 1.2rem;
      z-index: 99999999999;
      transition: 0.5s;
    }
    .move3 {
      position: fixed;
      top: 1.2rem;
      right: 0.8rem;
      transform: translateX(-0.8rem);
      z-index: 99999999999;
      transition: 0.5s;
    }
  }
}
</style>
